﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="/favicon.ico" >
	<link rel="Shortcut Icon" href="/favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="/lib/html5.js"></script>
	<script type="text/javascript" src="/lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />

	<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->
	<title>基地管理</title>

</head>
<body>
<!--_header 作为公共模版分离出去-->
<div th:replace="common/header::header"></div>
<!--_menu 作为公共模版分离出去-->
<div th:replace="common/menu::menu"></div>

<section class="Hui-article-box">
	<nav class="breadcrumb"><i class="Hui-iconfont"></i> <a href="/index" class="maincolor">首页</a>
		<span class="c-999 en">&gt;</span><span class="c-666">基地中心</span>
		<span class="c-999 en">&gt;</span><span class="c-666">基地管理</span></nav>
	<div class="Hui-article">
		<article class="cl pd-20">
			<div class="panel panel-default">
				<div class="panel-header">基地管理</div>
				<form class="panel-body text-c" id="form">
					基地编号：<input type="text" class="input-text radius mr-5" style="width:210px" name="baseId">
					基地名：<input type="text" class="input-text radius mr-5" style="width:210px" name="baseName">
					实训老师：<input type="text" class="input-text radius mr-5" style="width:210px" name="teacherName">
					<button type="submit" class="btn btn-success radius" name=""><i class="Hui-iconfont"></i> 查询</button>
				</form>
			</div>
			<div class="mt-20">
				<div class="cl pd-5 bg-1 bk-gray mt-20 ">
					<span class="l">
						<a th:href="@{/company/addBase}"  class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 创建基地</a>
					</span>
					<span class="r">共有数据：<strong id="dataLength"></strong> 条</span>
				</div>
				<table class="table table-border table-bordered table-striped table-hover">
					<tbody class="text-c" id="tbody">
					<tr>
						<td>基地编号</td>
						<td>基地名</td>
						<td>实训教师</td>
						<td>报名人数</td>
						<td>报到地址</td>
						<td>报到日期</td>
						<td>状态</td>
						<td>操作</td>
					</tr>

					</tbody>
				</table>
			</div>
		</article>
	</div>
</section>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
	$(function () {
		getBases();

		//条件查询表单提交
		$("#form").submit(function () {
			var searchParams = $('#form').serializeArray();
			$(".singleData").empty();
			$.ajax({
				type: "POST",
				data: searchParams,
				url: "/company/getBaseList",
				dataType: "json",
				success: function(data){
					showData(data);
				}
			});
			return false;//实现页面不刷新
		});
	});

	/*查询基地，进行表格填充*/
	function getBases() {
		$.ajax({
			type: "GET",
			url: "/company/getBaseList",
			dataType: "json",
			success: function(data){
				console.log(data);
				showData(data);
			}
		});
	}

	/*遍历数据进行渲染*/
	function showData(data) {
		$(".singleData").empty();
		if (data[0]){
			$.each(data,function (index,base) {
				var status = "";
				if (base.baseStatus=="1") {
					status = "<span class=\"label label-success radius\">已启用</span>";
				}else{
					status = "<span class=\"label radius\">已停用</span>";
				}
				var teacherName;
				var baseReportDate;
				var baseAddress;
				if (base.teacher){
					teacherName = base.teacher.teacherName;
				} else {
					teacherName = "<span style='color: red'>未分配</span>";
				}
				if (base.baseReportDate){
					baseReportDate = base.baseReportDate;
				} else {
					baseReportDate = "<span style='color: red'>未确定</span>";
				}
				if (base.baseAddress){
					baseAddress = base.baseAddress;
				} else {
					baseAddress = "<span style='color: red'>未确定</span>";
				}
				$("#tbody").append("<tr class='singleData'>\n" +
						"<td><a th:href=\"@{/company/baseDetails}\" class=\"c-primary\">"+base.baseId+"</a></td>\n" +
						"<td>"+base.baseName+"</td>\n" +
						"<td>"+teacherName+"</td>\n" +
						"<td><a th:href=\"@{/company/enrolledStudents}\" class=\"c-primary\">"+base.baseEnrolmentNum+"/"+base.baseNum+"</a></td>\n" +
						"<td>"+baseAddress+"</td>\n" +
						"<td>"+baseReportDate+"</td>\n" +
						"<td>"+status+"</td>\n" +
						"<td >\n" +
						"<a class='btn btn-primary radius size-MINI' href='/company/editBase/"+base.baseId+"'>&nbsp;&nbsp;编辑&nbsp;&nbsp;</a>\n" +
						"</td>\n" +
						"</tr>");
			});
			$("#dataLength").text(data.length);
		} else {
			$(".singleData").empty();
			$("#tbody").append("<tr class='singleData'><td colspan='8' style='color: red'><h4>"+data[1]+"</h4></td></tr>");
			$("#dataLength").text("0");
		}
	}
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
